<script setup>
import {Submit, ValidRecord} from "../../wailsjs/go/main/App.js";
import { MessagePlugin } from 'tdesign-vue-next';
import {
  RollbackIcon,
  ArrowLeftIcon
} from 'tdesign-icons-vue-next';
import { ref } from 'vue';
import router from "../router/index.js";
const back = ()=>{
  router.go(-1);
}

const formData = ref({
  url:"",
  file_type:""
})
const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    if(formData.value.url==="" || formData.value.file_type===""){
      return MessagePlugin.warning("无效数据");
    }
    Submit(formData.value.url,formData.value.file_type)
    MessagePlugin.success('提交成功');
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

const validInput= async ()=>{
  if(formData.value.url===""){
    return MessagePlugin.warning("无效数据");
  }
  const mes = await ValidRecord(formData.value.url)
  MessagePlugin.info(mes)
}
</script>
<template>
  <div class="container">
    <div style="height:36px;"></div>
    <div style="padding:10px;box-sizing: border-box;">
      <header>
        <t-button @click="back" variant="outline">
          <template #icon><ArrowLeftIcon /></template>
          返回
        </t-button>
      </header>
      <t-card style="margin-top: 10px;">
        <t-form :data="formData" @submit="onSubmit">
          <t-form-item label="文件类型" name="file_type">
            <t-radio-group v-model="formData.file_type">
              <t-radio value="doc">文档</t-radio>
              <t-radio value="html">网页</t-radio>
            </t-radio-group>
          </t-form-item>
          <t-form-item label="路径" name="url">
            <t-input placeholder="请输入路径" v-model="formData.url" />
          </t-form-item>
          <t-form-item>
            <t-space>
              <t-button theme="primary" type="submit">提交</t-button>
              <t-button variant="dashed" theme="warning" ghost @click="validInput">验证</t-button>
            </t-space>
          </t-form-item>
        </t-form>
      </t-card>

    </div>
  </div>
</template>

<style>
.container{
  background-image: linear-gradient(25deg, #3927a2, #7d56a7, #b088aa, #dfbdab);
  min-height:768px;
}
</style>
